<style>
  .expand.pear-btn:hover {
    color: currentColor;
    background-color: unset;
  }

  .expand.pear-btn {
    border: 1px solid rgb(255 255 255 / 0%)
  }
</style>
<div class="layui-card">
  <div class="layui-card-body">
    <form id="userForm" class="layui-form" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="realName" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" name="username" placeholder="" class="layui-input">
          </div>
        </div>
        <div class="layui-inline" style="margin-left: 50px;">
          <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
            <i class="layui-icon layui-icon-search"></i>
            查询
          </button>
          <button type="reset" class="pear-btn pear-btn-md">
            <i class="layui-icon layui-icon-refresh"></i>
            重置
          </button>
          <button type="button" class="pear-btn pear-btn-md expand">
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="user-table" lay-filter="user-table"></table>
  </div>
</div>

<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
</script>

<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
					class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
					class="layui-icon layui-icon-delete"></i></button>
			<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
</script>

<script type="text/html" id="user-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
				checked="{{ d.enable == 0 ? 'true' : 'false' }}">
</script>

<script type="text/html" id="user-sex">
		{{#if (d.sex == 1) { }}
			<span>男</span>
			{{# }else if(d.sex == 2){ }}
				<span>女</span>
				{{# } }}
</script>

<script type="text/html" id="user-login">
		{{#if (d.login == 0) { }}
			<span>在线</span>
			{{# }else if(d.sex == 1){ }}
				<span>离线</span>
				{{# } }}
</script>

<script type="text/html" id="user-createTime">
		{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<script>
  layui.use(['table','form','jquery','drawer','dropdown'],function() {
    let table=layui.table;
    let form=layui.form;
    let $=layui.jquery;
    let drawer=layui.drawer;
    let dropdown=layui.dropdown;

    let MODULE_PATH="/system/user/";

    formToggle({
      elem: "#userForm",
    });

    function formToggle(options) {
      var defaultsOpt={
        isExpand: false,
        prefixIcon: "layui-icon",
        toggleIcon: ['layui-icon-down','layui-icon-up'],
        toggleText: ['展开','折叠'],
      }
      var opt=$.extend({},defaultsOpt,options);
      var elem=opt.elem; // 绑定的表单元素,必填
      var min=opt.min; // 最小显示数,默认显示一行
      var isExpand=opt.isExpand; // 初始展开
      var prefixIcon=opt.prefixIcon+" "; // 图标前缀
      var toggleIcon=opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
      var toggleText=opt.toggleText; // 折叠和展开时的文本

      var eleDOM=$(elem+" .layui-inline");
      var firstElTop=eleDOM.first().offset().top;
      var targetEl=eleDOM.filter(function(index) {
        var isGtMin=(index+1)>min;
        var isGtFirstElTop=$(this).offset().top>firstElTop;
        var isNeqLast=(index+1)!=eleDOM.length;
        return min
          ? isGtMin&&isNeqLast
          :isGtFirstElTop&&isNeqLast;
      });

      var unExpandIcon=prefixIcon+toggleIcon[0];
      var expandIcon=prefixIcon+toggleIcon[1];
      var unExpandText=toggleText[0];
      var expandText=toggleText[1];
      var btnSelector=elem+" .expand";
      $(btnSelector).append("<i></i>")
      if(isExpand) {
        $(btnSelector).prepend("<span>"+expandText+"</span>");
        $(btnSelector+">i").addClass(expandIcon);
      } else {
        $(btnSelector).prepend("<span>"+unExpandText+"</span>")
        $(btnSelector+">i").addClass(unExpandIcon)
        targetEl.addClass("layui-hide");
      }
      $(btnSelector).click(function() {
        isExpand=!isExpand;
        if(isExpand) {
          $(btnSelector+">span").html(expandText);
          $(btnSelector+">i").removeClass(unExpandIcon).addClass(expandIcon);
          targetEl.removeClass("layui-hide")
        } else {
          $(btnSelector+">span").html(unExpandText);
          $(btnSelector+">i").removeClass(expandIcon).addClass(unExpandIcon);
          targetEl.addClass("layui-hide")
        }
      })
    }

    let cols=[
      [{
        type: 'checkbox'
      },
      {
        title: '账号',
        field: 'username',
        align: 'center',
        width: 100
      },
      {
        title: '姓名',
        field: 'realName',
        align: 'center'
      },
      {
        title: '性别',
        field: 'sex',
        align: 'center',
        width: 80,
        templet: '#user-sex'
      },
      {
        title: '电话',
        field: 'phone',
        align: 'center'
      },
      {
        title: '启用',
        field: 'enable',
        align: 'center',
        templet: '#user-enable'
      },
      {
        title: '登录',
        field: 'login',
        align: 'center',
        templet: '#user-login'
      },
      {
        title: '注册',
        field: 'createTime',
        align: 'center',
        templet: '#user-createTime'
      },
      {
        title: '操作',
        toolbar: '#user-bar',
        align: 'left',
        width: 160,
        fixed: 'right'
      }
      ]
    ]

    table.render({
      elem: '#user-table',
      url: '../../admin/data/table.json',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#user-toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      },'filter','print','exports'],
      done: function(res,curr,count) {
        for(var i=0;i<res.data.length;i++) {
          dropdown.render({
            elem: '#more_'+res.data[i].userId,
            data: [{
              title: 'menu item11',
              id: 100
            },{
              title: 'menu item22',
              id: 101
            },{
              title: 'menu item33',
              id: 102
            }],
            id: '#more_'+res.data[i].userId,
            click: function(obj) {
              layer.tips('点击了：'+obj.title,this.elem,{
                tips: [1,'#5FB878']
              })
            }
          });
        }
      }
    });

    table.on('tool(user-table)',function(obj) {
      if(obj.event==='remove') {
        window.remove(obj);
      } else if(obj.event==='edit') {
        window.edit(obj);
      }
    });

    table.on('toolbar(user-table)',function(obj) {
      if(obj.event==='add') {
        window.add();
      } else if(obj.event==='refresh') {
        window.refresh();
      } else if(obj.event==='batchRemove') {
        window.batchRemove(obj);
      }
    });

    form.on('submit(user-query)',function(data) {
      table.reload('user-table',{
        where: data.field
      })
      return false;
    });

    form.on('switch(user-enable)',function(obj) {
      layer.tips(this.value+' '+this.name+'：'+obj.elem.checked,obj.othis);
    });

    window.add=function() {
      layer.msg("添加")
    }

    window.edit=function(obj) {
      layer.msg("修改");
    }

    window.remove=function(obj) {
      layer.confirm('确定要删除该用户',{
        icon: 3,
        title: '提示'
      },function(index) {
        layer.close(index);
        let loading=layer.load();
        $.ajax({
          url: MODULE_PATH+"remove/"+obj.data['userId'],
          dataType: 'json',
          type: 'delete',
          success: function(result) {
            layer.close(loading);
            if(result.success) {
              layer.msg(result.msg,{
                icon: 1,
                time: 1000
              },function() {
                obj.del();
              });
            } else {
              layer.msg(result.msg,{
                icon: 2,
                time: 1000
              });
            }
          }
        })
      });
    }

    window.batchRemove=function(obj) {
      let data=table.checkStatus(obj.config.id).data;
      if(data.length===0) {
        layer.msg("未选中数据",{
          icon: 3,
          time: 1000
        });
        return false;
      }
      let ids="";
      for(let i=0;i<data.length;i++) {
        ids+=data[i].userId+",";
      }
      ids=ids.substr(0,ids.length-1);
      layer.confirm('确定要删除这些用户',{
        icon: 3,
        title: '提示'
      },function(index) {
        layer.close(index);
        let loading=layer.load();
        $.ajax({
          url: MODULE_PATH+"batchRemove/"+ids,
          dataType: 'json',
          type: 'delete',
          success: function(result) {
            layer.close(loading);
            if(result.success) {
              layer.msg(result.msg,{
                icon: 1,
                time: 1000
              },function() {
                table.reload('user-table');
              });
            } else {
              layer.msg(result.msg,{
                icon: 2,
                time: 1000
              });
            }
          }
        })
      });
    }

    window.refresh=function(param) {
      table.reload('user-table');
    }
  })
</script>